<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GWDQ1936JL"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-GWDQ1936JL');
</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Massachusetts PFAS Influence Map</title>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
    <!-- google font -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,800" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500&display=swap" rel="stylesheet">

    <link href="https://unpkg.com/maplibre-gl@2.1.6/dist/maplibre-gl.css" rel='stylesheet' />
    <link href="css/maplibre-gl-compare.css" rel='stylesheet' />

    <script src="https://unpkg.com/maplibre-gl@2.1.6/dist/maplibre-gl.js"></script>
    <script src="js/maplibre-gl-compare.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

    <!-- bootstrap icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <!-- bootstrap -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"></script>
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <!-- chromajs -->
    <script src="js/chroma.min.js">
    </script>

    <!-- plotly -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/simple-statistics/7.0.0/simple-statistics.min.js"></script>

    <script src="https://cdn.plot.ly/plotly-2.27.0.min.js" charset="utf-8"></script>

</head>

<body>

    <!-- LOADER -->
    <div id="loader"></div>
    <!-- Welcome Panel -->
    <div id="welcome" class="modal fade map-window modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Welcome to your Project!</h5>
                </div>
                <div class="modal-body map-window-content">
                    <p>
                        <h3><b>Why Does PFAS Matter?</b></h3>
                             PFAS contamination is an urgent environmental and public health issue. These chemicals are often referred to as "forever chemicals" because they do not break down in the environment, leading to widespread contamination of water, soil, and air. PFAS exposure has been linked to adverse health effects, including developmental issues in children, reduced fertility, and increased risk of certain cancers. Understanding where PFAS contamination exists is crucial for protecting both human health and the environment.
<h3><b>Why Map Schools?</b></h3>
Mapping schools in relation to PFAS contamination is a critical aspect of this project because schools are places where children spend a significant portion of their time. Children are more vulnerable to the harmful effects of environmental toxins like PFAS due to their developing bodies and higher intake of water relative to their body weight.
By mapping schools in proximity to known PFAS contamination sites, we can:
1. <b>Protect Children's Health:</b> Identifying schools near PFAS hotspots allows for targeted actions to ensure that the water and environment around these schools are safe. Protecting children from exposure to these harmful chemicals is essential for their long-term health and development.<br>
2. <b>Inform School Administrators and Parents:</b> Providing school administrators, staff, and parents with clear, accessible data about PFAS risks can help them make informed decisions about mitigating exposure and advocating for safer school environments.<br>
3. <b>Prioritize Remediation Efforts:</b> Mapping schools helps prioritize areas for remediation and monitoring, ensuring that resources are directed to where they are most needed to protect the health of the youngest and most vulnerable members of our communities.
Mapping schools in relation to PFAS contamination is about safeguarding the well-being of future generations and ensuring that all children have a safe environment to learn and grow.

                    </p>

                </div>
                <div class="modal-footer">
                    <div class="form-switch" id="nextTimeSwitcher">
                        <input class="form-check-input" type="checkbox">
                    </div>
                    <label id="nextTimeLabel">Don't show this welcome panel again.</label>

                    <button id="welcome-close" type="button" class="btn btn-primary py-1"
                        data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div id="left" class="map"></div>
    <div id="right" class="map"></div>

    <div class="map-overlay top">
        <div id="time-panel" class="map-overlay-inner">
            <h3>Massachusetts PFAS Influence Map</h3>
            <div class="subheadline">PFAS compounds:</div>
            <div>
                <label for="pfas">PFOS</label> <i class="bi bi-circle-fill" style="font-size: 0.6rem; color: red;"></i>
            </div>
            <div>
                <label for="pfas">PFOA</label> <i class="bi bi-circle-fill"
                    style="font-size: 0.6rem; color: orange;"></i>
            </div>

            <div class="subheadline">Social Factors:</div>
            <div>
                <label for="social" class="em_factor">Schools</label> <i class="bi bi-circle-fill"
                    style="font-size: 0.6rem; color: blue;"></i>
            </div>
            <div>
                <label for="social" class="em_factor">Household Median Income</label>
            </div>
            <div id="legend-color-bar" class="row colors ms-3"
                style="background: linear-gradient(to right, rgb(255, 247, 236), rgb(253, 195, 141), rgb(231, 83, 58), rgb(127, 0, 0));">
            </div>
            <p id="label-equity-matrix" class="labels">
                <span>45k</span>
                <span>85k</span>
                <span>125k</span>
                <span>185k</span>
            </p>


            <div style=" display: flex;justify-content: flex-end;">
                <p class="info">
                    <span><a href="https://alicexhui.github.io/instructions/index.html"
                            target="_blank">instruction</a></span>
                    <span><a href="https://alicexhui.github.io/aboutme/aboutindex.html" target="_blank">about
                            me</a></span>
                </p>
            </div>
        </div>
    </div>

    </div>



    <div id="tooltip" style="display: none;">Tooltip content</div>

    <!-- Burger Button for right map -->
    <!-- <div class="burger-btn" onclick="toggleOverlay()">☰</div> -->
    <div class="left-burger-btn" onclick="toggleLeftOverlay()">☰</div>
</body>
<script src="js/misc.js"></script>

<script src="js/map.js"></script>

</html>